<template>
    <div class="goodsList_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="9">
                <i class="el-icon-shopping-cart-full"></i>
            </el-col>
            <el-col :span="3">
                <h1>商品列表</h1>
            </el-col>
            <el-col :span=4 :offset="6">
                <el-input
                    size="small"
                    placeholder="输入查询商品名称"
                    v-model="searchInput"
                    maxlength=10
                    :clearable="true"
                    @clear="getGoodsList"
                    @keyup.native.enter="getGoodsList"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="getGoodsList"
                        size="mini"
                    >
                    </el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=22 :offset="1">
                <el-table
                    :data="goodsList"
                    :border="true"
                    :stripe="true"
                    align="center"
                    class="goodsListTable"
                    height="42vh"
                >
                    <el-table-column
                        type="index"
                        width="50"
                    >
                        <template slot="header">
                            <el-tooltip content="添加商品" placement="top-end">
                                <el-button
                                    type="success"
                                    size="mini"
                                    icon="el-icon-plus"
                                    circle
                                    @click="$router.push('/goods/add')"
                                >
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableinfo"
                        :key="item.index"
                        :prop="item.goodsInfoItem"
                        :label="item.goodsInfoTD"
                        :min-width="item.goodsTDWith"
                        sortable
                    >
                    </el-table-column>
                    <el-table-column
                        label="创建时间"
                        min-width="160"
                        sortable
                    >
                        <template v-slot='showDate'>
                            {{showDate.row.add_time | getYMDHMS}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="80"
                    >
                    <template v-slot='idData'>
                        <el-button-group>
                            <el-tooltip content="修改信息" placement="top-end">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    @click="toEditGoodsPage(idData.row.goods_id)"
                                >
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="删除商品" placement="top-start">
                                    <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="askDeleteGood(idData.row.goods_id,idData.row.goods_name)"
                                >
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1" style="margin-bottom: 15px">
                <hr/>
            </el-col>
        </el-row>
        <el-row >
            <el-col>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="showPagination"
                    :current-page="nowpage"
                    :page-sizes="[5,7,10,15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="goodsnum">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>


<script>
export default({
    name:'goodslist',
    data(){
        return {
            searchInput:'',
            nowpage: 1,
            pagesize: 5,
            goodsList: [],
            goodsnum: 0,
            tableinfo : [
                {
                    goodsInfoItem: 'goods_name',
                    goodsInfoTD: ' \0 商品名称',
                    goodsTDWith: '250'
                },
                {
                    goodsInfoItem: 'goods_price',
                    goodsInfoTD: ' \0 价格(元)',
                    goodsTDWith: '75'
                },
                {
                    goodsInfoItem: 'goods_weight',
                    goodsInfoTD: ' \0 重量(kg)',
                    goodsTDWith: '75'
                },
                {
                    goodsInfoItem: 'goods_number',
                    goodsInfoTD: ' \0 数量',
                    goodsTDWith: '55'
                }
            ],
            showPagination: true,
        }
    },
    created(){
        this.getGoodsList();
        this.checkPagination();
    },
    methods: {
        async getGoodsList(){
            const { data: res } = await this.$http.get('goods',{
                params:{
                    query: this.searchInput,
                    pagenum: this.nowpage,
                    pagesize: this.pagesize,
                }
            });
            if(res.meta.status == 200){
                this.goodsList = res.data.goods;
                this.goodsnum = res.data.total;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取商品列表失败！'
                    }
                )
            }
        },
        checkPagination(){
            if(this.goodsnum>=this.pagesize){
                this.showPagination =false;
            }else{
                this.showPagination =true;
            }
        },
        handleSizeChange(value){
            this.pagesize = value;
            this.getGoodsList();
            this.checkPagination();
        },
        handleCurrentChange(value){
            this.nowpage = value;
            this.getGoodsList();
            this.checkPagination();
        },
        toEditGoodsPage(value){
            this.$store.commit('giveEditGoodsID',value);
            this.$router.push('/goods/edit')
        },
        askDeleteGood(value1,value2){
            this.$confirm('<span style="color:red;font-weight:bold">注：删除操作不可逆！</span>'+'<br/>'+'请确认是否删除商品'+'<br/>“'+value2+'”','删除商品提示', {
                confirmButtonText: '删除',
                cancelButtonText: '返回',
                type: 'warning',
                dangerouslyUseHTMLString: true
            }).then(() => {
                this.deleteGood(value1,value2);
            this.$message({
                center:true,
                showClose: true,
                type: 'success',
                duration:2000,
                message: '开始执行删除商品“'+value2+'”'
            });
            }).catch(() => {
                this.$message({
                    center:true,
                    showClose: true,
                    duration:2000,
                    message: '取消删除商品“'+value2+'”'
                })
            });
        },
        async deleteGood(value1,value2){
            const { data: res} = await this.$http.delete('goods/'+ value1)
            if(res.meta.status == 200){
                if(this.goodsList.length == 1){
                    this.nowpage = this.nowpage-1
                };
                this.getGoodsList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '删除商品“'+value2+'”成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '删除商品“'+value2+'”失败！'
                    }
                )
            }
        }
    },
    filters:{
        //时间戳转精确到毫秒时间
        getYMDHMS (timestamp) {
            if(timestamp.toString().length==10){
                var time = new Date(timestamp*1000)
            }else{
                var time = new Date(timestamp)
            }
            let year = time.getFullYear()
            let month = (time.getMonth() + 1).toString().padStart(2, '0')
            let date = (time.getDate()).toString().padStart(2, '0')
            let hours = (time.getHours()).toString().padStart(2, '0')
            let minute = (time.getMinutes()).toString().padStart(2, '0')
            let second = (time.getSeconds()).toString().padStart(2, '0')
            return year + '年' + month + '月' + date + '日 ' + hours + '时' + minute + '分' + second + '秒'
        }
    }
})
</script>

<style lang="less" scoped>
    .goodsList_container{
        width: 80vw;
        text-align: center;
        background-color: #fff;
        padding: 30px 8px;
        margin:4vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        hr{
            background-color: #2495e7;
            height: 1px;
        }
        .goodsListTable{
            width: 100%;
            margin: 20px 0 20px 0;
        }
        .newFormButton{
            text-align: right;
            margin:0;
        }
    }
</style>